<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-breadcrumb
          separator-class="el-icon-arrow-right"
          style="float: left; display: inline; margin-top: 12px"
        >
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>涂装设备管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-button
          icon="el-icon-plus"
          style="float: right; display: inline"
          type="primary"
          @click="dialogFormVisible = true"
          >配置设备</el-button
        >
      </div>
      <el-table :data="CheckDeviceList" style="width: 100%">
        <el-table-column label="创建时间" align="center">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="设备名称" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.deviceName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="设备ID" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.deviceId }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="所属工序" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.gxName }}</span>
          </template>
        </el-table-column> -->
        <el-table-column label="所在生产线" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{
              scope.row.productLineName
            }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="所在生产线位置" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.locationName }}</span>
          </template>
        </el-table-column> -->
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!------------------------------------- 添加设备弹窗 ------------------------------------------->
    <el-dialog
      :append-to-body="true"
      title="添加设备"
      center
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="device" size="small">
        <el-form-item label="所属车间" :label-width="formLabelWidth">
          <el-input v-model="device.farmName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所属生产线" :label-width="formLabelWidth">
          <div class="block">
            <el-cascader
              ref="pdl"
              :options="options"
              :props="{ expandTrigger: 'hover' }"
              @change="handleChange"
            ></el-cascader>
          </div>
          <!-- <el-select v-model="device.productLineID" placeholder="请选择区域">
            <el-option label="涂装A线" value="201"></el-option>
            <el-option label="涂装B线" value="202"></el-option>
            <el-option label="涂装C线" value="203"></el-option>
            <el-option label="涂装D线" value="204"></el-option>
            <el-option label="涂装精检A" value="205"></el-option>
            <el-option label="涂装精检C" value="206"></el-option>
            <el-option label="涂装精车" value="207"></el-option>
          </el-select> -->
        </el-form-item>
        <!-- <el-form-item label="所在生产线位置" :label-width="formLabelWidth">
          <el-input v-model="device.locationName" autocomplete="off" placeholder="选填"></el-input>
        </el-form-item> -->
        <el-form-item label="设备名称" :label-width="formLabelWidth">
          <el-input
            v-model="device.deviceName"
            autocomplete="off"
            width="100px"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCheckDevice(device)"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  addPlantCheckDevices,
  getPlantCheckDeviceList,
} from "../../api/device";
export default {
  name: "device-plant",
  data() {
    return {
      CheckDeviceList: [],
      dialogFormVisible: false,
      device: {
        deviceName: "",
        farmName: "涂装车间",
        farmID: "2",
        productLineName: "",
        productLineID: "",
        // gxName: "",
        // gxID: "",
      },
      formLabelWidth: "120px",
      options: [
        {
          value: "201",
          label: "涂装A线"
        },
        {
          value: "202",
          label: "涂装B线"
        },
        {
          value: "203",
          label: "涂装C线",
        },
        {
          value: "204",
          label: "涂装D线"
        },
        {
          value: "205",
          label: "涂装精车"
        }
      ],
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleChange() {
      console.log(this.$refs.pdl.getCheckedNodes());
    },
    addCheckDevice(device) {
      this.device.productLineID = this.$refs.pdl.getCheckedNodes()[0].path[0];
      this.device.productLineName = this.$refs.pdl.getCheckedNodes()[0].pathLabels[0];
      // this.device.gxID = this.$refs.pdl.getCheckedNodes()[0].path[1];
      // this.device.gxName = this.$refs.pdl.getCheckedNodes()[0].pathLabels[1];

      console.log(device);
      addPlantCheckDevices(device).then((res) => {
        console.log(res);
        this.dialogFormVisible = false;
        this.getDeviceList();
      });
    },
    //获取点检设备列表
    getDeviceList() {
      getPlantCheckDeviceList()
        .then((res) => {
          console.log(res);
          this.CheckDeviceList = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    this.getDeviceList();
  },
};
</script>
<style lang="less" scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>